<template>
  <div class="profile">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h2>个人信息</h2>
        </div>
      </template>

      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        class="profile-form"
      >
        <el-form-item label="头像" prop="avatar">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>

        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" />
        </el-form-item>

        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>

        <el-form-item label="收货地址" prop="addresses">
          <div v-for="(address, index) in form.addresses" :key="index" class="address-item">
            <el-input
              v-model="address.detail"
              placeholder="详细地址"
              class="address-input"
            >
              <template #append>
                <el-button @click="removeAddress(index)" :icon="Delete" />
              </template>
            </el-input>
          </div>
          <el-button type="primary" link @click="addAddress">
            <el-icon><Plus /></el-icon>
            添加新地址
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">保存修改</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单历史 -->
    <el-card class="order-history">
      <template #header>
        <div class="card-header">
          <h2>订单历史</h2>
        </div>
      </template>

      <el-table :data="orders" style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="180" />
        <el-table-column prop="date" label="下单时间" width="180" />
        <el-table-column prop="total" label="金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.total }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" @click="viewOrderDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { Delete, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'

export default {
  name: 'UserProfile',
  setup() {
    const formRef = ref()
    const form = reactive({
      avatar: '',
      username: '',
      nickname: '',
      phone: '',
      email: '',
      addresses: [{ detail: '' }]
    })

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    }

    // 模拟订单数据
    const orders = ref([
      {
        orderNo: 'ORD20240301001',
        date: '2024-03-01 14:30:00',
        total: 299,
        status: '已完成'
      },
      {
        orderNo: 'ORD20240228001',
        date: '2024-02-28 10:20:00',
        total: 458,
        status: '待收货'
      }
    ])

    const handleAvatarSuccess = (response) => {
      form.avatar = response.url
    }

    const beforeAvatarUpload = (file) => {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        ElMessage.error('头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        ElMessage.error('头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }

    const addAddress = () => {
      form.addresses.push({ detail: '' })
    }

    const removeAddress = (index) => {
      form.addresses.splice(index, 1)
    }

    const submitForm = async (formEl) => {
      if (!formEl) return
      await formEl.validate((valid) => {
        if (valid) {
          // 实现保存逻辑
          ElMessage.success('保存成功')
        }
      })
    }

    const resetForm = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
    }

    const getStatusType = (status) => {
      const statusMap = {
        '已完成': 'success',
        '待收货': 'warning',
        '待付款': 'info',
        '已取消': 'danger'
      }
      return statusMap[status]
    }

    const viewOrderDetail = (order) => {
      // 实现查看订单详情逻辑
      console.log('View order detail:', order)
    }

    return {
      formRef,
      form,
      rules,
      orders,
      handleAvatarSuccess,
      beforeAvatarUpload,
      addAddress,
      removeAddress,
      submitForm,
      resetForm,
      getStatusType,
      viewOrderDetail,
      Plus,
      Delete
    }
  }
}
</script>

<style lang="scss" scoped>
.profile {
  max-width: 1000px;
  margin: 20px auto;
  padding: 0 20px;

  .profile-card {
    margin-bottom: 20px;
  }

  .card-header {
    h2 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }
  }

  .avatar-uploader {
    text-align: center;
    
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px dashed #d9d9d9;
      border-radius: 50%;
    }
  }

  .address-item {
    margin-bottom: 10px;

    .address-input {
      width: 100%;
    }
  }

  .order-history {
    .el-table {
      margin-top: 20px;
    }
  }
}
</style> 